<template>
  <div class="app-container">
    <div>
      <div
        style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
        <!-- 多条件分页查询所需条件的form -->
        <el-form :inline="true" :model="truckTypeDto" class="demo-form-inline">
          <el-form-item label="车型名称">
            <el-input ref="inputRef" v-model="truckTypeDto.name" placeholder="请输入车型名称"></el-input>
          </el-form-item>
          <el-form-item label="货物类型">
            <el-select v-model="truckTypeDto.goods_type_id" placeholder="请选择车队名称">
              <el-option label="请选择货物类型名称" value=""></el-option>
              <el-option v-for="item in goodsType" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetValues">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- end -->

      <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

        <!-- 添加车辆类型按钮 -->
        <el-button type="primary" @click="dataOperation(0,'add')" style="margin-left: 30px;margin-top: 30px">
          +新增车辆类型
        </el-button>
        <!-- end -->

        <div style="height: 20px"></div>

        <!-- table 用于展示项目建议信息 -->
        <el-table
          v-if="truckTypeShow"
          v-loading="truckTypelistLoading"
          :data="truckTypelist"
          style="width: 96%;margin-left: 32px"
          :max-height="620"
          :row-style="{ height: '55px' }"
        >
          <el-table-column fixed label="车型编号" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="车型名称" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="车辆载重" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.allowable_load }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="车辆体积" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.allowable_volume }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="车辆宽度" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.measure_width }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="车辆高度" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.measure_high }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="载货类型" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.goodsTypeName }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="状态" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? "启用" : "禁用" }}
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dataOperation(scope.row.id,'update')">编辑</el-button>
              <el-button @click.native.prevent="open(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end --->

        <div style="height: 50px;margin-bottom: 10px">

          <!-- 分页组件 -->
          <el-pagination
            background
            @current-change="change"
            @size-change="pageSizeChange"
            :current-page="truckTypePageNumber"
            :page-sizes="[10, 20, 40, 80]"
            :total="truckTypeTotal"
            layout="total, prev, pager, next, sizes,jumper"
            style="text-align: center; font-size: 8px; margin-top: 15px"
          >
          </el-pagination>
          <!-- end -->
        </div>

      </div> <!-- 间隔 -->

      <!-- 抽屉 -->
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        size="50%"
        direction="ttb"
        :before-close="handleClose"
        style="position: fixed; top: 85%; left: 52%; transform: translate(-50%, -50%); width: 50%; max-width: 1200px;height: 1540px;border-radius: 10px;"
      >
        <div style="margin-left: 70px">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="车辆类型名称" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="form.name" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="准载重量" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="form.allowable_load" style="width: 205px">
                    <template v-slot:append>千克</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="准载体积" label-width="100px">
                  <el-input type="text" v-model="form.allowable_volume" style="width: 205px">
                    <template v-slot:append>方</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="长" label-width="100px">
                  <el-input type="text" v-model="form.measure_long" style="width: 205px">
                    <template v-slot:append>米</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="宽" label-width="100px">
                  <el-input type="text" v-model="form.measure_width" style="width: 205px">
                    <template v-slot:append>米</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="高" label-width="100px">
                  <el-input type="text" v-model="form.measure_high" style="width: 205px">
                    <template v-slot:append>米</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="状态" label-width="100px">
                  <el-select v-model="form.status" placeholder="请选择状态" style="width: 205px">
                    <el-option label="请选择状态" value=""></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--        style="width: 96%;margin-left: 32px"-->

        <div style="height: 350px;">
          <el-table
            ref="multipleTable"
            v-if="goodsTypeShow"
            v-loading="goodsTypelistLoading"
            :data="goodsTypelist"
            :max-height="800"
            :row-style="{ height: '55px' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55" align="center" header-align="center">
            </el-table-column>
            <el-table-column fixed label="货物类型名称" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column fixed label="默认重量(千克)" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.default_weight }}
              </template>
            </el-table-column>
            <el-table-column fixed label="默认体积(方)" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.default_volume }}
              </template>
            </el-table-column>
            <el-table-column fixed label="说明" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.remark }}
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-pagination
            background
            @current-change="goodsChange"
            @size-change="goodsPageSizeChange"
            :current-page="goodsTypePageNumber"
            :page-sizes="[5]"
            :total="goodsTypeTotal"
            layout="total, prev, pager, next, sizes,jumper"
            style="text-align: center; font-size: 8px; margin-top: 15px"
          >
          </el-pagination>
          <!-- end -->
        </div>


        <div style="position: absolute; bottom: 30px; right: 40px;">
          <el-button type="primary" @click="agree(logo)">确认</el-button>
          <el-button>取消</el-button>
        </div>
      </el-drawer>
      <!-- end -->
    </div>
  </div>

</template>

<script>
import {getAllGoodsType, queryGoodsTypeByPage} from '@/api/goods/goods_type'
import {getAllByPage, addTruckType, updateTruckType, deleteTruckType, getTrueTypeById} from '@/api/truck/truck_type'

export default {
  data() {
    return {
      goodsTypeShow: true,
      truckTypeShow: true,
      selectedValue: '',
      goodsType: [],
      logo: 'add',
      form: {
        id: null,
        name: null,
        allowable_load: null,
        allowable_volume: null,
        measure_long: null,
        measure_width: null,
        measure_high: null,
        status: null,
        goods_type_id: null
      },
      title: '添加项目',
      drawer: false,
      truckTypeDto: {
        goods_type_id: null,
        name: null
      },
      truckTypelist: null,
      truckTypelistLoading: true,
      goodsTypelistLoading: true,
      goodsTypelist: [],
      truckTypePageNumber: 1,
      truckTypePageSize: 10,
      truckTypeTotal: 0,
      options: [],
      goodsTypeTotal: 0,
      goodsTypePageNumber: 1,
      goodsTypePageSize: 5,
      selectedIds: [],
      selectedIds2: [],
      lastPage:1,
      count:0,
      changeCount:0,

    }
  },
  created() {
    this.init()
  },
  methods: {
    //多条件分页查询
    query() {
      this.truckTypePageNumber = 1;
      this.init()
    },
    //复选框值改变
    handleSelectionChange(selection) {
       this.selectedIds = selection.map(item => item.id);

      // 添加新选中的值到另一个数组中
      this.selectedIds.forEach(id => {
        if (!this.selectedIds2.includes(id)) {
          this.selectedIds2.push(id);
        }
      });
      alert(this.count)
     if (this.lastPage !== this.goodsTypePageNumber || this.goodsTypePageNumber === 1) {
      //确定自动onchange事件结束将当前页数赋值给老页数
       // count等于changecount表示自动onchange事件已全部执行完了
        if (this.count+1 === this.changeCount) {
          this.lastPage = this.goodsTypePageNumber
        }else{
          this.count = this.changeCount+1
        }
        return
     }
      this.selectedIds2 = this.selectedIds2.filter(id => this.selectedIds.includes(id));


    },
    //初始化
    init() {
      this.queryGoodsTypeType()
      this.queryGoodsTypePage()
      this.truckTypelistLoading = true

      const truckTypeDto = {
        pageNum: this.truckTypePageNumber,
        pageSize: this.truckTypePageSize,
        goods_type_id: this.truckTypeDto.goods_type_id,
        name: this.truckTypeDto.name
      }

      getAllByPage(truckTypeDto).then(response => {
        this.truckTypelist = response.data.list
        this.truckTypelistLoading = false
        this.truckTypeTotal = response.data.total
      })
    },

    //查询车辆类型信息
    queryGoodsTypeType() {
      getAllGoodsType().then(response => {
        this.goodsType = response.data
      })
    },
    queryGoodsTypePage() {
      const goodsTypeDto = {
        pageNum: this.goodsTypePageNumber,
        pageSize: this.goodsTypePageSize
      }

      queryGoodsTypeByPage(goodsTypeDto).then(response => {
        this.goodsTypelist = response.data.list
        this.goodsTypelistLoading = false
        this.goodsTypeTotal = response.data.total

        this.goodsTypelist.forEach(item => {
          if (this.selectedIds2.includes(item.id)) {
            this.$nextTick(() => {
              this.count++
              this.$refs.multipleTable.toggleRowSelection(item, true); // 选中行
            });
          }
        });
      })
    }
    ,
    //重置分页查询条件
    resetValues() {
      this.$refs.inputRef.clear(); // 清空输入框的值
      this.truckTypeDto.goods_type_id = ''
      this.truckTypeDto.fleet_id = '' // 清空下拉列表框的选中项
    },
    //分页
    change(val) {
      this.truckTypePageNumber = val;
      this.init();
    },
    goodsChange(val) {
      this.pageBoolean = true
      this.goodsTypePageNumber = val;
      this.queryGoodsTypePage();
    },
    goodsPageSizeChange(newPageSize) {
      this.goodsTypePageSize = newPageSize;
      this.queryGoodsTypePage();
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.truckTypePageSize = newPageSize;

      this.init()
    },
    //详细信息的修改
    dataOperation(id, logo) {
      this.drawer = true
      if (logo === 'add') {
        this.selectedIds2 = []
        this.title = '添加车辆类型'
      } else {
        getTrueTypeById(id).then(response => {
          this.form = response.data
          this.selectedIds2 = response.data.goods_type_id

          this.goodsTypelist.forEach(item => {
            this.selectedIds2.forEach(id => {
              if (item.id === id) {
                this.$refs.multipleTable.toggleRowSelection(item, true);
              }
            })
          });
        })
        this.title = '修改车辆类型'
      }
    },
    //添加或修改车辆信息
    agree(logo) {
      if (logo === 'add') {
        this.saveTruckType()
      } else {
        this.updateTruckType()
      }
    },
    saveTruckType() {
      this.form.goods_type_id = this.selectedIds2
      console.log(this.form)
      addTruckType(this.form).then(response => {
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
          this.drawer = false
          this.form = {
            id: null,
            name: null,
            allowable_load: null,
            allowable_volume: null,
            measure_long: null,
            measure_width: null,
            measure_high: null,
            status: null,
            goods_type_id: null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    updateTruckType() {
      updateTruckType(this.form).then(response => {
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.init()
          this.drawer = false
          this.form = {
            id: null,
            name: null,
            allowable_load: null,
            allowable_volume: null,
            measure_long: null,
            measure_width: null,
            measure_high: null,
            status: null,
            goods_type_id: null
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs.multipleTable.clearSelection()
          this.selectedIds = []
          this.form = {
            id: null,
            name: null,
            allowable_load: null,
            allowable_volume: null,
            measure_long: null,
            measure_width: null,
            measure_high: null,
            status: null,
            goods_type_id: null
          }
          done();
        })
        .catch(_ => {
        });
    },
    //删除车辆信息(其实就是修改车辆状态)
    excise(truckType) {
      deleteTruckType(truckType).then(response => {
        this.$message(response.message)
        this.init()
      })
    },
    //删除信息的弹出框
    open(id) {
      const truckType = {
        id: id,
        status: 0
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要删除此车辆类型吗? '),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.excise(truckType)
            done()
          } else {
            done();
          }
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 908px;
  background-color: #f1f1f1; /* 设置背景颜色 */
}

.linkStyle {
  font-size: 14px;
  margin: 10px 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.container {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 50px;
  margin-top: 30px;
  margin-right: 20px; /* 调整按钮与标题之间的间距 */
  color: black;
}

.close-button {
  margin-left: 900px; /* 将按钮推到最左边 */
}

.el-form-item .el-form-item__label {
  width: auto; /* 自适应宽度 */
  white-space: nowrap; /* 不换行 */
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #99a9bf;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
